<script setup lang="ts">
import { ref } from 'vue';
const username = ref('123')
const username2 = ref('456')
const onInput = (event: Event) => {
    username2.value = (event.target as HTMLInputElement).value
}
const gender = ref('男')
const onChange = (event: Event) => {
    gender.value = (event.target as HTMLInputElement).value
}
const selectedCity = ref('')
</script>
<template>
    <input type="text" v-model="username" />

    {{ username }}
    <!--  v-model就相当与:value @input-->
    <div>---------------</div>

    <input type="text" :value="username2" @input="onInput" />
    <div>用户名:{{ username2 }}</div>
    <div>---------------</div>
    <div>
        <span> 请选择性别 ：</span>

        <!-- <input type="radio" name="gender" value="男" v-model="gender" />男
        <input type="radio" name="gender" value="女" v-model="gender" />女
         -->
        <label> <input type="radio" name="gender" value="男" :checked="gender === '男'" @change="onChange" />男
        </label>
        <label><input type="radio" name="gender" value="女" :checked="gender === '女'" @change="onChange" />女 -->
        </label>

        <div>选择的性别是：{{ gender }}</div>

        <div>
            <span>你喜欢的城市</span>
            <select v-model="selectedCity">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
            </select>
            <p>选择的城市：{{ selectedCity }}</p>
        </div>
    </div>
</template>